<template>
  <ForgetHeader/>
  <section class="forget-section">
    <div class="container">
      <!-- 表单 -->
      <div class="xtx-card" v-if="currStep!==4">
        <h3>忘记密码</h3>
        <XtxSteps :active="currStep" style="padding:0 100px">
          <XtxStepsItem title="填写用户名" />
          <XtxStepsItem title="验证身份" />
          <XtxStepsItem title="设置新密码" />
          <XtxStepsItem title="完成" />
        </XtxSteps>
        <div class="check-account" v-if="currStep===1">
          <form class="xtx-form-label">
            <div class="xtx-form-item">
              <label>用户名：</label>
              <input type="text" v-model="account" placeholder="输入用户名称">
            </div>
            <div class="xtx-form-item">
              <label>验证码：</label>
              <input type="text" v-model="captchaCode" placeholder="输入下面图形中验证码">
            </div>
            <div class="xtx-form-item">
              <label></label>
              <div class="captcha">
                <img :src="captcha" alt="">
                <span>看不清？</span>
                <a href="javascript:;" @click="setCaptcha()">换一张</a>
              </div>
            </div>
            <div class="xtx-form-item">
              <label></label>
              <a class="submit" @click="checkAccount()" href="javascript:;">下一步</a>
            </div>
          </form>
        </div>
        <div class="check-mobile" v-if="currStep===2">
          <form class="xtx-form-label">
            <div class="xtx-form-item">
              <label>用户名：</label>
              <input type="text" :value="mobile" readonly>
            </div>
            <div class="xtx-form-item">
              <label>验证码：</label>
              <input type="text" v-model="mobileCode" placeholder="短信验证码">
              <span class="code" @click="getMobileCode()"> {{time === 0 ? '发送验证码' : `${time}秒后失效`}}</span>
            </div>
            <div class="xtx-form-item">
              <label></label>
              <a class="submit" @click="checkMobile()" href="javascript:;">下一步</a>
            </div>
          </form>
        </div>
        <div class="set-password" v-if="currStep===3">
          <form class="xtx-form-label">
            <div class="xtx-form-item">
              <label>新的密码：</label>
              <input type="password" v-model="password" placeholder="设置6至20位字母、数字和符号组合">
            </div>
            <div class="xtx-form-item">
              <label>重复密码：</label>
              <input type="password" v-model="rePassword" placeholder="请再次输入上面密码">
            </div>
            <div class="xtx-form-item">
              <label></label>
              <a class="submit" @click="setPassword()" href="javascript:;">下一步</a>
            </div>
          </form>
        </div>
      </div>
      <div class="xtx-card" v-else>
        <div class="xtx-success-box">
          <span class="iconfont icon-queren2"></span>
          <p class="tit">密码已重置成功</p>
          <p class="desc">重新登录请使用新密码进行登录</p>
          <a class="btn" @click="success()" href="javascript:;">重新登录</a>
        </div>
      </div>
    </div>
  </section>
  <ForgetFooter />
</template>

<script>
import ForgetHeader from './components/forget-header.vue'
import ForgetFooter from './components/forget-footer.vue'
import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { v4 as uuidv4 } from 'uuid'
import { baseURL } from '@/utils/request'
import { verifyAccount, findMobileCode, verifyMobileCode, setNewPassword } from '@/api/user'
import Message from '@/components/library/message'
import { useIntervalFn } from '@vueuse/core'
export default {
  name: 'ForgetIndex',
  components: {
    ForgetHeader,
    ForgetFooter
  },
  setup () {
    const currStep = ref(1)
    const captcha = ref('')
    const ticket = ref('')
    const uuid = ref('')
    const account = ref('')
    const captchaCode = ref('')
    const mobile = ref('')
    const mobileCode = ref('')
    const password = ref('')
    const rePassword = ref('')
    const router = useRouter()
    onMounted(() => {
      setCaptcha()
    })
    // 获取验证码图片
    const setCaptcha = () => {
      uuid.value = uuidv4()
      captcha.value = baseURL + '/reset/verification?uuid=' + uuid.value
    }
    // 验证用户是否存在
    const checkAccount = () => {
      const params = reactive({
        account,
        code: captchaCode,
        uuid
      })
      if (account.value && captchaCode.value) {
        verifyAccount(params).then(data => {
          mobile.value = data.result.mobile
          ticket.value = data.result.ticket
          currStep.value = 2
        }).catch(e => {
          Message({ type: 'warn', text: e.response.data.message })
        })
      } else {
        Message({ type: 'warn', text: '请填写用户名和验证码' })
      }
    }
    // 倒计时的pasue 暂停 resume 开始
    // useIntervalFn (回调函数，执行间隔，是否立即开启)
    const time = ref(0)
    const { pause, resume } = useIntervalFn(() => {
      time.value--
      if (time.value <= 0) {
        pause()
      }
    }, 1000, false)
    onUnmounted(() => {
      pause()
    })

    // 获取短信验证码
    const getMobileCode = async () => {
      if (mobile.value && time.value === 0) {
        await findMobileCode(ticket.value).then(data => {
          Message({ type: 'success', text: '验证码已发送成功' })
          time.value = 300
          resume()
        }).catch(e => {
          Message({ type: 'warn', text: e.response.data.message })
        })
      } else {
        Message({ type: 'warn', text: '请勿重复发送验证码' })
      }
    }
    // 验证手机号
    const checkMobile = () => {
      const params = reactive({
        mobile,
        code: mobileCode,
        ticket
      })
      if (mobile.value && mobileCode.value && ticket.value) {
        if (mobileCode.value.length !== 6) {
          Message({ type: 'warn', text: '短信验证码位数有误' })
        } else {
          verifyMobileCode(params).then(data => {
            ticket.value = data.result.ticket
            currStep.value = 3
          }).catch(e => {
            Message({ type: 'error', text: e.response.data.message })
          })
        }
      } else {
        Message({ type: 'warn', text: '请填写短信验证码' })
      }
    }
    // 设置新密码
    const setPassword = async () => {
      const params = reactive({
        password,
        ticket
      })
      if (password.value && rePassword.value && ticket.value) {
        if (password.value.length < 6) {
          return Message({ type: 'warn', text: '请设置至少6位以上密码' })
        }
        if (password.value !== rePassword.value) {
          return Message({ type: 'warn', text: '请确认两次输入的密码是否一致' })
        }
        await setNewPassword(params).then(data => {
          currStep.value = 4
        }).catch(e => {
          Message({ type: 'error', text: e.response.data.message })
        })
      }
    }
    const success = () => {
      router.push('/login')
    }
    return { currStep, captcha, ticket, uuid, account, captchaCode, mobile, mobileCode, password, rePassword, setCaptcha, checkAccount, getMobileCode, time, checkMobile, setPassword, success }
  }
}
</script>

<style lang="less" scoped>
.forget-section {
    background: #f5f5f5;
    padding: 50px 0;
    .xtx-card {
      width: 100%;
      min-height: 600px;
      background: #fff;
      h3 {
        font-size: 26px;
        font-weight: 400;
        color: #999;
        padding-left: 50px;
        height: 180px;
        line-height: 180px;
      }
      .xtx-step {
        width: 100%;
        display: flex;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        .item {
          flex: 1;
          text-align: center;
          &:active {
            border-color: #27ba9b;
            background-color: #27ba9b;
            color: #fff;
          }
          .step {
            height: 48px;
            position: relative;
            .num {
              width: 48px;
              height: 48px;
              border: 2px solid #e4e4e4;
              border-radius: 50%;
              line-height: 44px;
              font-size: 28px;
              color: #ccc;
              margin: 0 auto;
              position: relative;
              z-index: 1;
              background-color: #fff;
            }
            .line {
              background-color: #27ba9b
            }
            .line-right {
              left: 50%;
            }
            .line-left {
              left: 0;
            }
          }
          .title {
            margin-top: 15px;
            color: #999;
          }
        }
      }
      .xtx-form-label {
        padding-left: 360px;
        margin-top: 80px;
        .xtx-form-item {
          position: relative;
          padding-bottom: 24px;
          display: flex;
          label {
            width: 100px;
            padding-right: 15px;
            text-align: right;
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            color: #999;
          }
          input {
            width: 300px;
            height: 50px;
            border: 1px solid #e4e4e4;
            padding-left: 10px;
          }
          .captcha {
            line-height: 50px;
            height: 50px;
            img {
              width: 134px;
              height: 50px;
              margin-right: 10px;
            }
            a {
              color: @xtxColor;
            }
          }
          .code {
            position: absolute;
            left: 310px;
            top: 16px;
            color: @xtxColor;
            cursor: pointer;
          }
          .submit {
            width: 300px;
            height: 50px;
            background: #27ba9b;
            border-radius: 4px;
            display: block;
            font-size: 16px;
            color: #fff;
            text-align: center;
            line-height: 50px;
          }
        }
      }
      .xtx-success-box {
        padding-top:250px;
        text-align:center;
        color:#999;
        .iconfont {
          font-size:80px;
          color:@xtxColor;
        }
        .tit {
          font-size:20px;
          padding:20px 0
        }
        .desc {
          font-size:16px;
          padding-bottom:20px
        }
        .btn {
          width:300px;
          height:50px;
          background:#27ba9b;
          border-radius:4px;
          display:block;
          font-size:16px;
          color:#fff;
          text-align:center;
          line-height:50px;
          margin:0 auto;
        }
      }
    }
}
</style>
